<template>
    <div class="class-list" 
        v-loading="loading.status"
        :element-loading-text="loading.txt"
    >
        <div class="course-content">
            <div class="course-content-data clear">
                <template>
                    <el-select v-model="subject_id" placeholder="请选择" @change="searchData">
                        <el-option v-for="item in orgSubject" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </template>
                <el-date-picker v-model="live_date" type="date" :picker-options='pickerOptions' value-format="yyyy-MM-dd" @change="searchData" placeholder="选择日期">
                </el-date-picker>
                <el-button type="primary" size="small" @click="reset">重置</el-button>
                <span>只能查看往后10天的排课情况</span>
            </div>
            <div class="course-content-wp" v-for="(date_txt, date_inx) in titleDate" :key="date_inx">
                <div class="course-content-wp-time">
                    <span>{{date_txt|datefmt('charToday')}}</span>
                </div>
                <ul>
                    <li class="course-content-list clear" v-for="(item, index) in listData" :key="index" v-if="item.start_time.indexOf(date_txt) > -1">
                        <div class="course-content-list-icon fl"></div>
                        <div class="course-content-list-r">
                            <div class="course-content-list-r-title">
                                <span @click="jumpLiveInfo(item)" style="cursor: pointer;">{{item.name}}</span>
                                <el-tag :type="item.live_status==1?'warning':(item.live_status==2?'primary':'info')" v-html="getStatus(item.live_status)"></el-tag>
                                <div class="train-list-operation fr">
                                    <el-popover placement="bottom" width="100" popper-class="ioperation_hover" trigger="hover">
                                        <ul class="r_ioperation">
                                            <li @click="enclosureView(item.id)">
                                                查看附件
                                            </li>
                                        </ul>
                                        <i slot="reference" class="el-icon-arrow-down"></i>
                                    </el-popover>
                                </div>
                            </div>
                            <div class="course-content-list-r-info">
                                <em>{{item.subject_name}}</em>
                                <span>授课教师：{{item.user_name}}</span>
                                <span>学校：{{item.school_name}}_{{item.grade_name}}</span>
                                <span>直播时间：{{item.start_time|datefmt('MM-DD')}} {{item.start_time|datefmt('HH:mm')}} - {{item.end_time|datefmt('HH:mm')}}</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <el-pagination v-if="listParam.data_sum>10" background class="pageing" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParam.page_index" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="listParam.page_size" layout="total, sizes, prev, pager, next, jumper" :total="listParam.data_sum">
        </el-pagination>
        <div class="dependent" v-if="listParam.data_sum===0">
            <i class="ipng image_state01"></i>
            <p>还没发现任何相关的内容哦~</p>
        </div>
        <el-dialog title="查看附件" :visible.sync="enclosureVisible" width="640px" custom-class="visible" :close-on-click-modal="false">
            <ul>
                <li class="enclosure-list clear" v-for="(item1, index1) in attachmentData" :key="index1">
                    <div class="fl">
                        <img src="../../../../public/images/format/resourceicon3.png">
                        <span title="附件">
                            {{item1.name}} .{{item1.postfix}}</span>
                    </div>
                    <div class="fr">
                        <el-button @click="viewResource(item1)" type="text">预览</el-button>
                        <el-button @click="down(item1)" type="text">下载</el-button>
                    </div>
                </li>
            </ul>
        <div class="dependent" v-if="attachmentData.length===0">
            <i class="ipng image_state01"></i>
            <p>还没发现任何相关的内容哦~</p>
        </div>
        </el-dialog>
        <transition name="el-fade-in-linear">
            <div class="masking" :class="{ activeLive: isActive }">
                <div class="maskingBox" v-loading="viewLoading.status" :element-loading-text="viewLoading.txt">
                    <div class="masking_h clear">
                        <span>视频预览</span>
                        <i class="el-icon-close fr" @click="viewClose"></i>
                    </div>
                    <div class="masking_c">
                        <videoAlertView v-if="showVideoPlayer" :playParam.sync="playParam">
                        </videoAlertView>
                    </div>
                </div>
            </div>
        </transition>
        <transition name="el-fade-in-linear" lock-scroll="false">
            <div class="masking" :class="{ activeLive: isPDFActive }">
                <div class="maskingBox">
                    <div class="masking_h clear">
                        <span>文档预览</span>
                        <i class="el-icon-close fr" @click="viewPDFClose"></i>
                    </div>
                    <div class="masking_c">
                        <div>
                            <div class="pdfView">
                                <div v-if="viwPdfParam.loadedRatio > 0 && viwPdfParam.loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: viwPdfParam.loadedRatio * 100 + '%' }">{{ Math.floor(viwPdfParam.loadedRatio * 100) }}%</div>
                                <pdf ref="pdf" :src="viwPdfParam.src" :page="viwPdfParam.page" @progress="viwPdfParam.loadedRatio = $event" @error="error" @num-pages="viwPdfParam.numPages = $event" @link-clicked="viwPdfParam.page = $event">
                                </pdf>
                            </div>
                            <el-pagination @current-change="pdfPageChange" :current-page="viwPdfParam.page" :page-size="1" layout="total,  prev, pager, next, jumper" :total="viwPdfParam.numPages">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <el-dialog title="图片预览" :visible.sync="imgVisible" width="auto" style="min-width:550px;" top="0" custom-class="imgVisible" :close-on-click-modal="false">
            <div class="imgViewx">
                <img :src="imgViewUrl" alt="">
            </div>
        </el-dialog>
        <el-dialog title="音频预览" :visible.sync="voiceVisible" width="auto" style="min-width:550px;" top="0" custom-class="imgVisible" :close-on-click-modal="false">
            <div class="imgViewx">
                <audio id="voicepoauy" controls="controls" :src="voiceViewUrl" controlsList="nodownload" autoplay>
                    Your browser does not support the audio tag.
                </audio>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import pdf from "vue-pdf";
import videoAlertView from "./videoAlertView";
export default {
    data() {
        return {
            loading:{
                    status:false,
                    txt:'获取数据...',
            },
            pickerOptions: {
                disabledDate: time => {
                    return (
                        time.getTime() < Date.now() - 8.64e7 ||
                        time.getTime() >
                            Date.now() - 8.64e7 + 3600 * 1000 * 24 * 10
                    );
                }
            },
            statusArr: { 1: "未开始", 2: "进行中", 3: "已结束" },
            enclosureVisible: false,
            live_date: "",
            subject_id: null,
            orgSubject: [{ id: null, name: "全部科目" }],
            subjectParam: {
                //获取科目,版本，参数
                type: 2,
                org_id: null,
                status: 1
            },
            listParam: {
                subject_id: null,
                live_date: "",
                data_sum: 0,
                page_index: 1,
                page_size: 10
            },
            listData: [],
            titleDate: [],
            // 附件预览
            attachmentData: [],
            watchUpload: {
                picture: false,
                relate_res: false
            },

            isActive: true,
            isPDFActive: true,
            viwPdfParam: {
                src: "",
                loadedRatio: 0,
                page: 1,
                numPages: 0,
                rotate: 0
            },
            imgVisible: false,
            imgViewUrl: "",
            voiceVisible: false,
            voiceViewUrl: "",
            viewLoading: {
                status: false,
                txt: "加载数据..."
            },
            showVideoPlayer: false,
            playParam: { play_url: "" },
            listLoadTime: 0, //列表加载时间，用于判断直播是否开始或结束
            listLoadTimeOut: null //累计列表加载时间
        };
    },
    created() {
       this.getSubject();
        this.getList();
    },
    beforeDestroy() {
        clearInterval(this.listLoadTimeOut);
    },
    filters: {
        datefmt: function(input, fmtstring) {
            var mydate = new Date(input);
            var y = mydate.getFullYear();
            var m = mydate.getMonth() + 1;
            var d = mydate.getDate();
            var h =
                mydate.getHours() < 10
                    ? "0" + mydate.getHours()
                    : mydate.getHours();
            var mi =
                mydate.getMinutes() < 10
                    ? "0" + mydate.getMinutes()
                    : mydate.getMinutes();
            var s = mydate.getSeconds();
            var date1 = new Date();
            var y1 = date1.getFullYear();
            var m1 = date1.getMonth() + 1;
            var d1 = date1.getDate();
            if (fmtstring == "charToday") {
                if (y === y1 && m === m1 && d === d1) {
                    return "今天";
                } else {
                    return m + "月" + d + "日";
                }
            }
            if (fmtstring == "MM-DD") {
                return m + "月" + d + "日";
            }
            if (fmtstring == "HH:mm") {
                return h + ":" + mi;
            }
        }
    },
    methods: {
        // 日期是否今天
        charDate(val) {
            return new Date(val).getTime() === new Date().getTime()
                ? true
                : false;
        },
        // 查看附件
        enclosureView(val) {
            this.enclosureVisible = true;
            let success = data => {
                this.attachmentData = data.data;
            };
            this.$ajax({
                url: "api/teachingschedule/teaching_schedule_resource",
                method: "get",
                params: {
                    schedule_id: val
                },
                func: {
                    success: success
                }
            });
        },
        jumpLiveInfo(obj) {
            if (parseInt(obj.live_status) === 1) {
                if (
                    obj.server_timestamp + this.listLoadTime <
                    obj.start_time_s
                ) {
                    this.$message.warning("该直播还未开始哦");
                    return false;
                } else if (
                    obj.server_timestamp + this.listLoadTime >
                    obj.end_time_s
                ) {
                    this.$message.warning("该直播已经结束啦");
                    return false;
                }
            } else if (parseInt(obj.live_status) === 2) {
                if (obj.server_timestamp + this.listLoadTime > obj.end_time_s) {
                    this.$message.warning("该直播已经结束啦");
                    return false;
                }
            } else if (parseInt(obj.live_status) === 3) {
                this.$message.warning("该直播已经结束啦");
                return false;
            }
            this.$router.push(
                "/course2/live?id=" + obj.id + "&name=" + obj.name
            );
        },
        getStatus(val) {
            return this.statusArr[parseInt(val)];
        },
        searchData() {
            this.listParam.subject_id = this.subject_id;
            this.listParam.live_date = this.live_date;
            this.getList();
        },
        reset() {
            this.subject_id = null;
            this.live_date = "";
            this.listParam = {
                subject_id: null,
                live_date: "",
                data_sum: 0,
                page_index: 1,
                page_size: 10
            };
            this.getList();
        },
        //获取科目
        getSubject() {
            let success = data => {
                this.orgSubject = data.data;
                this.orgSubject.unshift({ id: null, name: "全部科目" });
            };
            this.$ajax.get("api/cate/subject", {
                params: this.subjectParam,
                func: { success: success }
            });
        },
        getList() {
            console.info(1)
            this.loading.status = true;
            let success = data => {
                console.info(2)
                this.loading.status = false;
                this.listData = data.data.data;
                this.listParam.data_sum = data.data.data_sum;
                this.listParam.page_size = data.data.page_size;
                this.listParam.page_index = data.data.page_index;
                //累加列表加载秒数
                this.listLoadTime = 0;
                this.listLoadTimeOut = setInterval(() => {
                    this.listLoadTime++;
                }, 1000);
                this.substrDate(getOneColumn(this.listData, "start_time"));
            };
            let fail = data=>{
                console.info(3)
                 this.loading.status = false;
                 this.$message.error( data.msg )
            }
            //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            this.$ajax.get("api/teachingschedule/teaching_schedule_list", {
                params: this.listParam,
                func: { success: success,fail:fail }
            });
        },
        substrDate(data) {
            this.titleDate = [];
            for (var i = 0; i < data.length; i++) {
                var s_date = data[i].substr(0, 10);
                if (this.titleDate.indexOf(s_date) === -1) {
                    this.titleDate.push(s_date);
                }
            }
        },
        //分页
        handleSizeChange(val) {
            this.listParam.page_index = 1;
            this.listParam.page_size = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.listParam.page_index = val;
            this.getList();
        },

        pdfPageChange(val) {
            this.viwPdfParam.page = val;
        },
        error: function(err) {
            //this.$message.error('读取文件失败');
        },
        //资源预览转发
        viewResource(obj) {
            this.viewLoading.status = true;

            //视频预览
            if (parseInt(obj.file_type) === 6) {
                this.isActive = false;
            } else if (parseInt(obj.file_type) === 3) {
                //图片预览
                this.imgVisible = true;
            } else if (parseInt(obj.file_type) === 1) {
                //文档预览
                this.isPDFActive = false;
            } else if (parseInt(obj.file_type) === 5) {
                //音频预览
                this.voiceVisible = true;
            } else {
                this.$message.warning("不支持预览的资源类型");
                return false;
            }
            let success = data => {
                var result = data.data;
                //视频预览
                if (parseInt(result.file_type) === 6) {
                    this.videoView(result.path);
                } else if (parseInt(result.file_type) === 3) {
                    //图片预览
                    this.imgView(result.path);
                } else if (parseInt(result.file_type) === 1) {
                    //文档预览
                    this.pdfView(result.path);
                } else if (parseInt(result.file_type) === 5) {
                    //音频预览
                    this.voiceView(result.path);
                    //this.$message.warning("不支持预览的资源类型")
                } else {
                    this.$message.warning("不支持预览的资源类型");
                }
            };
            let fail = data => {
                this.viewLoading.status = false;
                this.$message.error(data.msg);
            };
            this.$ajax.get("api/resource/view_info", {
                // is_teaching_resource	string	是	是否是排课评课资源（1：是，0：否）
                params: { id: obj.id, is_teaching_resource: 1 },
                func: { success: success, fail: fail }
            });
        },
        voiceView(url) {
            this.voiceViewUrl = url;
            document.getElementById("voicepoauy").load();
        },
        imgView(url) {
            this.imgViewUrl = url;
        },
        //pdf预览
        pdfView(url) {
            this.viwPdfParam.src = pdf.createLoadingTask(url);
            // console.log(this.viwPdfParam.src);
        },
        viewPDFClose() {
            this.isPDFActive = true;
        },
        //关闭视频预览
        viewClose() {
            this.showVideoPlayer = false;
            this.isActive = true;
        },
        //视频预览
        videoView(url) {
            this.showVideoPlayer = true;
            this.playParam.play_url = url;
        },
        // 下载附件
        down(obj) {
            var form = document.createElement("form");
            var type = 1;
            form.action =
                this.BASE_URL +
                "/index/resource/teaching_schedule_resource_download";
            form.method = "post";
            form.style.display = "none";
            var opt_id = document.createElement("textarea");
            opt_id.name = "id";
            opt_id.value = obj.id;
            form.appendChild(opt_id);
            var opt_type = document.createElement("textarea");
            opt_type.name = "type";
            opt_type.value = type;
            form.appendChild(opt_type);
            document.body.appendChild(form);
            form.submit();
            document.body.removeChild(form);
        }
    },
    components: {
        pdf,
        videoAlertView
    }
};
</script>
<style lang="scss">
.class-list .course-content-list-icon{
    display: inline-block;
    width: 40px;
    height:32px;
    background: url("../../../../public/images/ipng.png") 36px 642px;
}
.class-list .el-icon-arrow-down{
    font-size: 16px;
}
.masking {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.5s;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9999999999;
    .maskingBox {
        position: absolute;
        top: 15%;
        left: 50%;
        width: 800px;
        margin-left: -400px;
        background: #fff;
    }
    .masking_h {
        padding: 10px;
        background: #348efc;
        text-align: center;
        text-align-last: justify;
        > span,
        > i {
            font-size: 16px;
            text-align-last: initial;
            display: inline-block;
            vertical-align: middle;
            color: #fff;
        }
        > i {
            cursor: pointer;
        }
    }
}
.pdfView {
    max-height: 420px;
    overflow: hidden;
    overflow-y: auto;
    z-index: 3;
}
.masking_c {
    height: 450px;
    padding: 10px;
    .el-pagination {
        padding-bottom: 20px;
    }
    .vjs-big-play-button {
        top: 50% !important;
        left: 50% !important;
    }
}
.activeLive {
    opacity: 0;
    visibility: hidden;
}
.imgVisible {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    min-width: 550px;
    min-height: 550px;
    background-color: #fff;
    margin: 0;
    .el-dialog__header {
        background-color: #348efc;
        padding: 20px;
        span,
        i {
            color: #fff;
        }
        i {
            font-size: 20px;
        }
        i:hover {
            color: #fff;
        }
    }
    .el-dialog__body {
        text-align: center;
        padding: 0;
        img {
            max-width: 100%;
            margin: 0 auto;
        }
    }
}
.el-dialog__wrapper {
    text-align: center;
}
</style>